<template>
  <template v-for="(item,index) in userMenu" :key="index">
    
    <el-sub-menu :index="item.path" v-if="item.children&&item.children.length>0&&item.children[0].menuType==1" >
      <template #title class="spanbgc">
        <el-icon v-if="item.icon">
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{item.menuName}}</span>
      </template>
       <TreeMeun :userMenu = "item.children"/>
      <!-- 这里要使用递归组件 -->
      <!-- <el-sub-menu index="2">
        <template #title>{{item.menuName}}</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu> -->
    </el-sub-menu>

    <!-- 单个菜单 -->
    <el-menu-item :index="item.path" v-else>
      <el-icon v-if="item.icon">
        <component :is="item.icon"></component>
      </el-icon>
      <span>{{item.menuName}}</span>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
// import { ref, reactive, onMounted } from 'vue';

//elementplus上的menu组件
import {
  Menu as IconMenu,
  Location,
} from '@element-plus/icons-vue'

defineProps(['userMenu'])
</script>

<style scoped lang="scss">
</style>
